<template>
	<view class="index-page" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
	  <view ref="head" class="head" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
	  	<text class="iconfont icon-row icon"  @click="showAsideDrawer"></text><myuni-search class="search-input">我吹过你吹过的晚风</myuni-search><text class="iconfont icon-yuyin icon "></text>
	  </view>
      <view ref="bannerbox" class="bannerbox">
		  <uni-swiper-dot :info="banners" mode="round" :current="current" :dotsStyles="dotsStyles">
		    <swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true" class="banner-swiper"  @change="swiperChanged">
		    	<swiper-item v-for="item in banners" :key="item.bannerId" class="banner-item">
		    		<image :src="item.pic" :lazy-load="true" mode="widthFix"></image>
		    	</swiper-item>
		    </swiper>
		  </uni-swiper-dot>
	  </view>
	  <!-- nav start -->
	  <scroll-view enable-flex="true" scroll-x="true" class="scroll-nav">
	  	<navigator url="/pages/playlist/recommend" class="scroll-nav-item">
			<view class="nav-icon" :class="themeType==='light'?'':'bgc'">
			  <i class="iconfont icon-rili" :class="themeType==='light'?'icon-light':'icon'"></i>
			</view>
			<text class="nav-name">每日推荐</text>
		</navigator>
	   <view class="scroll-nav-item" @click="showFm">
	   	<view class="nav-icon" :class="themeType==='light'?'':'bgc'">
	   	  <i class="iconfont icon-shouyinji" :class="themeType==='light'?'icon-light':'icon'"></i>
	   	</view>
	   	<text class="nav-name">私人FM</text>
	   </view>
	   <navigator url="/pages/more/more?type=1" class="scroll-nav-item">
	   	<view class="nav-icon" :class="themeType==='light'?'':'bgc'">
	   	  <i class="iconfont icon-gedan" :class="themeType==='light'?'icon-light':'icon'"></i>
	   	</view>
	   	<text class="nav-name">歌单</text>
	   </navigator>
	   <navigator url="/pages/rank/rank" class="scroll-nav-item">
	   	<view class="nav-icon":class="themeType==='light'?'':'bgc'">
	   	  <i class="iconfont icon-paihangbang" :class="themeType==='light'?'icon-light':'icon'"></i>
	   	</view>
	   	<text class="nav-name">排行榜</text>
	   </navigator>
	   <navigator url="" class="scroll-nav-item">
	   	<view class="nav-icon" :class="themeType==='light'?'':'bgc'">
	   	  <i class="iconfont icon-zhuanji" :class="themeType==='light'?'icon-light':'icon'"></i>
	   	</view>
	   	<text class="nav-name">数字专辑</text>
	   </navigator>
	   <navigator url="" class="scroll-nav-item">
	   	<view class="nav-icon" :class="themeType==='light'?'':'bgc'">
	   	  <i class="iconfont icon-zhibohuifang" :class="themeType==='light'?'icon-light':'icon'"></i>
	   	</view>
	   	<text class="nav-name">直播</text>
	   </navigator>
	   <navigator url="" class="scroll-nav-item">
	   	<view class="nav-icon" :class="themeType==='light'?'':'bgc'">
	   	  <i class="iconfont icon-iconfontyouxihudong" :class="themeType==='light'?'icon-light':'icon'"></i>
	   	</view>
	   	<text class="nav-name">娱乐游戏</text>
	   </navigator>
	  </scroll-view>
	  <!-- nav end -->
	  <!-- recommend-playlist start -->
	  <view class="recommend recommend-playlist">
		<view class="title">
			<text>推荐歌单</text><navigator url="/pages/more/more?type=1" open-type="navigate">歌单广场</navigator>
		</view>
	  	<view class="list-container">
	  	  <myuni-scroll :list="playList" :isScroll="true" path="/pages/playlist/wander" :nest="true"></myuni-scroll>
	  	</view>
	  </view>
	  <!-- recommend-playlist end -->
	  <!-- recommend-mv start -->
	  <view class="recommend recommend-mv">
	  		<view class="title">
	  			<text>热门MV</text><navigator url="/pages/more/more?type=2" open-type="navigate">更多</navigator>
	  		</view>
	  	<view class="list-container">
	  	  <myuni-scroll :list="hotMv" :isScroll="false" path="/pages/playmv/playmv" :nest="true" @emitClickItem="enterMv"></myuni-scroll>
	  	</view>
	  </view>
	  <!-- recommend-mv end -->
	  <!-- recommend-new-song start -->
	  <view class="recommend recommend-music">
	  		<view class="title">
	  			新音乐
	  		</view>
	  	<view class="list-container">
	  	  <myuni-scroll :list="newSong" :isScroll="false"  path="/pages/playlist/playlist" @emitClickItem="enterNewMusic"></myuni-scroll>
	  	</view>
	  </view>
		<!-- recommend-new-song end -->
		<myuni-player :currntSong="currntSong" :fm="fm" @emitChangeSong="ChangeSong"></myuni-player>
		<!-- aside-start -->
	  <!-- #ifdef H5 -->
	  <uni-drawer ref="aside_drawer" :width="300" class="aside-drawer" :class="themeType==='light'?'light':'dark'" @touchstart.native="asideTouchstart" @touchmove.native="asideTouchmove" @touchend.native="asideTouchend">
	  	<myuni-aside></myuni-aside>
	  </uni-drawer>
	  <!-- #endif -->
	  <!-- #ifndef H5 -->
	  <uni-drawer ref="aside_drawer" :width="270" class="aside-drawer" :class="themeType==='light'?'light':'dark'">
		  <myuni-aside></myuni-aside>
	  </uni-drawer>
	  <!-- #endif -->
	  <!-- aside-end -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
	export default {
		data() {
			return {
				banners:[],
				playList:[],
				hotMv:[],
				newSong:[],
				asideVisible:false,
				nickname:'',
				current:0,
				currntSong:{},
				fm:false,
				dotsStyles:{
				  height:2,
				  backgroundColor:'#ccc',
				  selectedBackgroundColor:'#fff',
				  border:'none',
				  selectedBorder:'none'
                },
				asideTouch:{
				  startClientX:0,
				  startClientY:0,
				  left:0,
				  width:0
				}
			}
		},
		onLoad(option) {
		  this.initData()
		  this.initCurrntSong()
		},
		computed:{
			...mapState(['themeType','cookie','userInfo'])
		},
		mounted() {
			if(this.themeType==='light'){
				uni.setTabBarStyle({
					"color": "#ccc",
					"selectedColor": "#000",
					"borderStyle": "black",
					"backgroundColor": "#fff",
				})
				uni.setNavigationBarColor({
					frontColor:'#000000',
					backgroundColor:'#ffffff',
				},800)
			}else{
				uni.setTabBarStyle({
					"color": "#fff",
					"selectedColor": "#ca2137",
					"borderStyle": "black",
					"backgroundColor": "#17171a",
				})
			}
		},
        methods: {
			initCurrntSong(){
				if(uni.getStorageSync('music').url){
					var music = uni.getStorageSync('music')
					if(music.playing){
						delete music.url
					}
					this.currntSong = music
				}
			},
			initData(){
				//获取轮播图
				this.request({
					url:"/banner?type=1"
				}).then(res=> {
					this.banners=res.banners
				})
				const timestamp= Date.now()
				//获取歌单漫游
				this.request({
					url:"/personalized?limit=9&timestamp="+timestamp
				}).then(res=> {
					this.playList=res.result||[]
					})
				// // 获取推荐MV
				this.request({
					url:"/mv/first?limit=10"
				}).then(res=> {
					this.hotMv=res.data
				})
				// // 获取新音乐
				this.request({
					url:"/personalized/newsong"
				}).then(res=> {
					this.newSong=res.result
				})
			},
			ChangeSong(isNext){
				let playlist=uni.getStorageSync('playlist')
				var index
				if(isNext){
					this.currntSong.index===playlist.length-1?index=0:index=this.currntSong.index+1
				}else{
					this.currntSong.index===0?index=playlist.length-1:index=this.currntSong.index-1
				}
				playlist[index].index=index
				// this.getSong(playlist[index])
				if(this.currntSong.type==='playlist'){
					this.getSong(playlist[index])
				}
				else if(this.currntSong.type==='newMusic'){
					this.enterNewMusic(playlist[index])
				}else{
					
				}
			},
			getSong(item){
				const {picUrl,name}=item.al
				const {name:singer}=item.ar
				this.request({
					url:'/song/url?id='+item.id
				}).then(res=>{
					uni.setStorageSync('music',{id:res.data[0].id,picUrl,name,singer,url:res.data[0].url,playing:true,index:item.index,type:'playlist'})
					this.currntSong = uni.getStorageSync('music')
				})
			},
			enterNewMusic(item){
				const {picUrl,name}=item
				const {name:singer,id:singerId}=item.song.artists[0]
				this.request({
					url:'/song/url?id='+item.id
				}).then(res=>{
					uni.setStorageSync('music',{picUrl,name,singer,singerId,url:res.data[0].url,playing:true,index:item.index,type:'newMusic'})
					this.currntSong = uni.getStorageSync('music')
				})
				uni.setStorageSync('playlist',this.newSong)
			},
			enterMv(info){
			},
			showFm(){
				this.request({
					url:'/personal_fm?cookie='+this.cookie
				}).then(res=>{
					var fmList=res.data.map((val,index)=>{return {
						al:val.album,
						ar:val.artists,
						id:val.id,
						index:index
					}})
					uni.setStorageSync('playlist',fmList)
					this.fm=true
					this.getSong(fmList[0])
				})
			},
            showAsideDrawer() {
			    if(!this.userInfo){
			    	uni.navigateTo({
			    		url:"/pages/login/login"
			    	})
			    }else{
					console.log(this.userInfo)
					this.$refs.aside_drawer.open();
					//#ifdef H5
					 this.$nextTick(()=>{
					 	var asideEl=this.$refs.aside_drawer.$el.childNodes[1]
					 	this.asideTouch.width=parseInt((asideEl.style.width).replace(/px/g,""))
					 })
					//#endif
			    }
            },
			swiperChanged(e){
				this.current = e.detail.current;
			},
		    //#ifdef H5
		     asideTouchstart(e){
		     	this.asideTouch.startClientX=e.touches[0].clientX;
				this.asideTouch.startClientY=e.touches[0].clientY;
		     },
		     asideTouchmove(e){
		     	if((this.asideTouch.startClientX-e.touches[0].clientX)>30&&Math.abs(this.asideTouch.startClientY-e.touches[0].clientY)<30){
					var asideEl=this.$refs.aside_drawer.$el.childNodes[1]
		     		var left=this.asideTouch.width-e.touches[0].clientX
		     		if(left>0){
		     			this.asideTouch.left=left
		    			asideEl.style.left=-left+"px"
		     		}
		     	}
		     },
		     asideTouchend(e){
		     	if(this.asideTouch.left>=100) {
		     		this.$refs.aside_drawer.close();
		     		this.asideTouch.left=0
		     	}else{
		     	  var asideEl=this.$refs.aside_drawer.$el.childNodes[1]
		     	  asideEl.style.left=0
		     	}
		     },
		     //#endif
		    switchChange(v){
				this.themeType='light'
			},
		},
		onHide() {
			this.fm=false
		},
		onShow() {
			this.initCurrntSong()
		},
		onPullDownRefresh() {
			setTimeout(()=>{
              this.initCurrntSong()
              uni.stopPullDownRefresh();
			},2000)
		}
	}
</script>
<script module="render" lang="renderjs">
	export default {
		mounted() {
		  //#ifdef APP-PLUS || H5
		  document.addEventListener("scroll", (e)=>{
			  let scrolled = document.documentElement.scrollTop || document.body.scrollTop;
			  if(scrolled>40){
			    this.$refs.head.$el.style.opacity=1
			  }else{
			    this.$refs.head.$el.style.opacity=0.7
			  }
		  })
		  //#endif
		}
	}
</script>
<style lang="scss"  scoped>

.index-page{
	position: absolute;
	width: 100%;
	height: 1000px;
	padding-top: 112rpx;
	/*  #ifdef  APP-PLUS  */
	padding-top: 168rpx;
	/*  #endif  */
	.head{
		position: fixed;
		width: 100%;
		left:0;
		top:0;
		box-sizing: border-box;
		padding:10rpx 20rpx;
		display: flex;
		align-items: center;
		z-index: 999;
		/*  #ifdef  APP-PLUS || H5  */
		opacity: 0.7;
		/*  #endif  */
		transition: opacity 0.7s linear;
		.search-input{
		  flex: 1;
		}
	}
	/*  #ifdef  APP-PLUS  */
	.head{
		padding: 66rpx 10rpx 10rpx;
	}
	/*  #endif  */
	
    .light{
		z-index: 9999;
		::v-deep.uni-drawer__content{
			background-color: $bg-light-deep;
		}
	}
	.dark{
		z-index: 9999;
		::v-deep.uni-drawer__content{
			background-color: $bg-dark-deep;
		}
	}
	.banner-swiper{
		padding-top: 10rpx;
		height: 750rpx * 420 / 1080;
		.banner-item{
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			image{
				width: 100%;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
	}
	.scroll-nav{
	  display: flex;
	  padding: 10rpx 20rpx;
      width: 100%;
	  height: 140rpx;
	  overflow: hidden;
 	  white-space: nowrap;
	  touch-action: none !important;
	  ::v-deep.uni-scroll-view-content{
		  display: flex;
	  }
	  .scroll-nav-item{
	  	box-sizing: border-box;
	  	flex-shrink: 0;
	  	display: flex;
	  	flex-direction: column;
	  	justify-content: space-around;
	  	align-items: center;
	    width: 135rpx;
		height: 140rpx;
	  	.nav-icon{
	  		display: flex;
	  		align-items: center;
	  		justify-content: center;
	  		width: 80rpx;
	  		height: 80rpx;
	  		border-radius: 50%;
			i{
			  font-size: 46rpx;
			}
	  	}
	  	.nav-name{
	  		font-size: 28rpx;
	  		color: $font;
	  	}
	  }
	}
	.recommend{
		.title{
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			color: $font;
			font-weight: 700;
		}
		.list-container{
			padding: 10rpx 20rpx;
		}
	}
}
</style>
